<div class="layui-card">
    <label class="layui-form-label" style="width: 60px"><a href="javascript:;" id="showRoomConfig"><cite>点击查看</cite></a></label>
    <div class="layui-upload">
        <label class="layui-form-label">头像:</label>
        <div class="layui-upload layui-input-block">
            <input type="hidden" name="headImgUrl" required lay-verify="required" />
            <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
        </div>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>

</div>



<script type="text/html" id="room-config-module">
    <form id="dispersionFlatPrice-form" lay-filter="dispersionFlatPrice-form" class="layui-form model-form" style="margin-top:-20px;margin-left: 30px">
        <table class="layui-table" id="room-config-table">
            <tr>
                <td colspan="10">
                    <div class="layui-input-inline" id="rental-method-config"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="1" title="WIFI">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="2" title="空调">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="3" title="热水器">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="4" title="洗衣机">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="5" title="冰箱">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="6" title="电视">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" value="7" title="微波炉">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="8" title="燃气灶">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="9" title="抽油烟机">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="10" title="电磁炉">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="11" title="床">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="12" title="书桌">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="13" title="衣柜">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="14" title="沙发">
                </td>
                <td>
                    <input type="checkbox" name="roomConfig" lay-skin="primary" checked value="15" title="阳台">
                </td>
            </tr>
        </table>
        <div class="layui-form-item model-form-footer">
            <button class="layui-btn layui-btn-primary" ew-event="closeDialog" id="room-config-close-bt" type="button">取消</button>
            <button class="layui-btn" id="room-config-form-submit" lay-filter="room-config-form-submit" lay-submit>保存</button>
        </div>
    </form>
</script>

<script>
    layui.use(['layer', 'admin', 'form', 'index','upload','config'], function () {
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;
        var index = layui.index;
        var upload = layui.upload;
        var config = layui.config;
        // form.render('radio');

        //显示表单弹窗
        $("#showRoomConfig").click(function () {
            showEditModel("房屋配置", 'room-config-module')
        });

        form.on('submit(room-config-form-submit)', function (data) {
            console.log(data);
        });
        // 配置弹窗
        var showEditModel = function (title, moduleId) {
            admin.open({
                title: title,
                content: $("#" + moduleId).html(),
                area: ['600px', '350px'],
                success: function () {
                    $("#rental-method-config").append("<input type='radio' checked value='1' title='" + "整租" + "'" + " >");
                    form.render('checkbox');
                    form.render('radio');
                }
            });
        }
        form.on('submit(room-config-form-submit)', function (data) {
            var a = '';
            $("input[name='roomConfig']:checked").each(function () {
                a += $(this).val() + ",";
            })
            alert(a);
            $("#room-config-close-bt").click();
        });

        form.render();

        //文件上传
        upload.render({
            elem: '#fileBtn' ,
            url:  config.base_server + 'api-file/files-anon',
            accept: 'file' ,
            auto: true ,
            before: function(obj){
                layer.load(); //上传loading
                this.data={access_token:config.getToken().access_token};
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $(".layui-upload-img").remove();
                    $('#demo2').append('<img src="' + result + '" width="100px" height="100px" alt="' + file.name + '" class="layui-upload-img">')
                });
            },
            done: function(data){
                layer.closeAll('loading');
                $("[name=headImgUrl]").val(data.id);
            },
            error: function (data) {
                layer.closeAll('loading');
            }
        });
    });
</script>